<!--清算账户资金池管理录入页面-->
<template>
  <div class="app-container">
    <div style="width: 1024px; margin: 0 auto">
      <el-form ref="entryForm" :model="formData" :rules="rules" label-width="150px">
        <el-row v-if="formData.rspId">
          <el-col :span="24">
            <el-form-item label="交易流水号：" prop="rspId">
              <el-input v-model="formData.rspId" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="法人机构清算行行号：" prop="lpStBrno">
              <el-input v-model="formData.lpStBrno" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人机构清算行行名：" prop="lpStBrnoName">
              <el-input v-model="formData.lpStBrnoName" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="管理类型：" prop="fpMngType">
              <el-select v-model="formData.fpMngType" placeholder="请选择" style="width: 100%" :disabled="isforbid">
                <el-option
                  v-for="dict in dictMap.FP_MNG_TYPE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分支机构数目：" prop="branchNum">
              <el-input v-model="formData.branchNum" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-card class="form-card" v-show="formData.fpMngType == 'MT00'">
        <ht-table
          ref="dataTable"
          :showSerialNumber="false"
          :multi-select="false"
          :dictMap="dictMap"
          :initData="false"
          :reqConfig="reqConfig"
          :queryParams="queryParams"
          :tableBindColumns="tableBindColumns"
          :opButtonList="opButtonList"
          :showRightToolbar="false"
          :randomRowKey="true"
          defaultEventKey="copyTable"
        >
          <template v-slot:operate>
            <el-table-column align="left" fixed="right" label="操作" width="50">
              <template slot-scope="scope">
                <ht-button-group
                  :buttonList="[
                    {
                      label: '添加',
                      visible: isShow,
                      doFunc: () => {
                        handleAction('add', scope.row);
                      },
                    },
                  ]"
                />
              </template>
            </el-table-column>
          </template>
        </ht-table>
        <ht-table
          ref="dataTable2"
          :showSerialNumber="false"
          :multi-select="false"
          :dictMap="dictMap"
          :reqConfig="{}"
          :randomRowKey="true"
          :queryParams="queryParams"
          :tableBindColumns="tableBindColumns2"
          :opButtonList="opButtonList"
          :showRightToolbar="false"
          :showPagination="false"
        >
          <template v-slot:operate>
            <el-table-column align="left" fixed="right" label="操作" width="50">
              <template slot-scope="scope">
                <ht-button-group
                  :buttonList="[
                    {
                      label: '删除',
                      class: 'del-btn',
                      doFunc: () => {
                        handleAction('delete', scope.row);
                      },
                      visible: isShow,
                    },
                  ]"
                />
              </template>
            </el-table-column>
          </template>
        </ht-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="->,total, sizes, prev, pager, next, jumper"
          :total="brnoList.length">
        </el-pagination>
      </el-card>
      <div class="bottom-control">
        <el-button type="primary" @click="submitFn" :loading="isLoading" v-if="!this.formData.rspId">提交</el-button>
        <el-button type="warning" @click="resetFn">重置</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { apiUrlConfig, save } from "@/api/cnaps/saps/clearAcctPooling/clear_fundpool_entry.js";
import { listPageMixin } from "@/libs/listPageMixin";
import { log } from "util";
import { mapGetters } from "vuex";

export default {
  name: "clearFundpoolEntry",
  mixins: [listPageMixin],
  components: {},
  data() {
    return {
      isforbid: false,
      isLoading: false,
      isShow: true,
      reqConfig: apiUrlConfig,
      //数据字典
      searchFormDictList: ["FP_MNG_TYPE"],
      // 查询参数
      queryParams: {
        lpStBrno: "",
        lpStBrnoName: "",
      },
      formOptions: [],
      opButtonList: () => {
        return [];
      },
      tableBindColumns: [
        { label: `分支机构清算行行号`, prop: "drctBankCode", sortable: false, align: "center" },
        {
          label: `分支机构清算行行名`,
          prop: "drctBankName",
          sortable: false,
          align: "center",
        },
      ],
      tableBindColumns2: [
        { label: `分支机构清算行行号`, prop: "branchStBrno", sortable: false, align: "center" },
        {
          label: `分支机构清算行行名`,
          prop: "branchStBrnoName",
          sortable: false,
          align: "center",
        },
      ],
      brnoList: [],
      formData: {
        rspId: "",
        lpStBrno: "",
        lpStBrnoName: "",
        fpMngType: "",
        branchNum: 0,
      },
      rules: {
        fpMngType: [
          {
            required: true,
            message: "必填",
            trigger: "change",
          },
        ],
      },
      currentPage: 1,
      pageSize: 20,
    };
  },
  computed: {
    ...mapGetters(["globalBusData"]),
  },
  watch: {
    globalBusData: {
      handler(val) {
        this.$set(this.formData, "lpStBrno", val.cnapsBrno);
        this.$set(this.formData, "lpStBrnoName", val.cnapsBrname);
        this.$set(this.queryParams, "lpStBrno", val.cnapsBrno);
        this.$set(this.queryParams, "lpStBrnoName", val.cnapsBrname);
        this.$nextTick(() => {
          this.$refs.dataTable.doQuery();
        });
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  created() {},
  methods: {
    //切换每页显示数据量时的回调
    handleSizeChange (size) {
      this.pageSize = size;
      this.handleCurrentChange(this.currentPage);
    },
    //切换页码回调
    handleCurrentChange (currentPage) {
      let page = this.brnoList.slice((currentPage-1)*this.pageSize,currentPage*this.pageSize);
      this.$refs.dataTable2.dataList = page
      this.currentPage = currentPage;
    },
    reset() {
      this.resetForm("entryForm");
      this.$set(this.formData, "rspId", "");
      //   this.$set(this, "formData", {});
    },
    submitFn() {
      this.$refs["entryForm"].validate((valid) => {
        if (valid) {
          if (this.formData.fpMngType == "MT00" && this.brnoList.length == 0) {
            this.$alert("请添加记录", "系统提示", {
              confirmButtonText: "确认",
              type: "error",
              callback: (action) => {},
            });
            return;
          }
          this.isLoading = true;
          let saveObj = {};
          if (this.brnoList.length > 0) {
            saveObj = {
              brnoList: this.brnoList,
              lpStBrno: this.formData.lpStBrno,
              lpStBrnoName: this.formData.lpStBrnoName,
              fpMngType: this.formData.fpMngType,
              branchNum: this.formData.branchNum,
            };
          } else {
            saveObj = {
              lpStBrno: this.formData.lpStBrno,
              lpStBrnoName: this.formData.lpStBrnoName,
              fpMngType: this.formData.fpMngType,
              branchNum: this.formData.branchNum,
            };
          }
          save(saveObj)
            .then((res) => {
              this.isLoading = false;
              this.$set(this.formData, "rspId", res.result.rspId);
              this.isforbid = true;
              this.isShow = false;
              console.log(res, "提交成功！");
              this.msgSuccess("提交成功！");
            })
            .catch((err) => {
              this.isLoading = false;
            });
        }
      });
    },
    resetFn() {
      if (this.formData.rspId) {
        this.$refs.dataTable.doQuery();
        this.isforbid = false;
        this.isShow = true;
      }
      if (this.brnoList.length > 0) {
        this.brnoList.splice(0, 1);
        this.brnoList = this.$refs.dataTable2.returnDataListFn();
      }
      this.reset();
    },
    handleAction(type, row = {}) {
      switch (type) {
        case "add":
          this.addFn(row);
          break;
        case "delete":
          this.brnoList.map((item, index) => {
            if (item.branchStBrno == row.branchStBrno) {

              let delIndex = (this.currentPage-1) * this.pageSize + index;
              this.brnoList.splice(delIndex, 1);
              this.$refs.dataTable2.dataList = this.brnoList
              if(index === 0 && this.currentPage !== 1){
                this.handleCurrentChange(this.currentPage-1);
              }else {
                this.handleCurrentChange(this.currentPage);
              }
              this.$set(this.formData, "branchNum", this.brnoList.length);
              this.msgSuccess("删除成功！");
            }
          });
          break;
      }
    },
    addFn(row) {
      let isHasValue = false;
      if (this.brnoList.length > 0) {
        this.brnoList.map((item) => {
          if (item.branchStBrno == row.drctBankCode) {
            isHasValue = true;
          }
        });
      }
      if (isHasValue) {
        this.$alert("不能重复添加", "系统提示", {
          confirmButtonText: "确认",
          type: "error",
          callback: (action) => {},
        });
        return;
      }
      let addObj = {};
      this.$set(addObj, "branchStBrno", row.drctBankCode);
      this.$set(addObj, "branchStBrnoName", row.drctBankName);
      this.brnoList.push(addObj);
      this.$set(this.formData, "branchNum", this.brnoList.length);
      console.log(this.$refs.dataTable2, this.brnoList, addObj, "this.$refs.dataTable2");
      this.handleCurrentChange(this.currentPage);
      this.msgSuccess("添加成功！");
    },
    // dataLoadComplete(res) {
    //   console.log(res, "列表请求数据");
    //   this.$set(this.formData, "lpStBrno", res.result.data[0].drctBankCode);
    //   this.$set(this.formData, "lpStBrnoName", res.result.data[0].drctBankName);
    // },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  overflow: scroll;
}
.bottom-control {
  margin: 10px 0;
  text-align: center;
}
::v-deep .el-table__body-wrapper {
  height: 80px !important;
}
</style>
